{% extends "task_manage.html" %}
{% block task_edit %}
<div>
    <!--模块列表-->
    <h4 class="sub-header"><span class="label label-primary">编辑任务</span></h4>
    <!--测试用例名称-->
    <div style="margin-bottom: 5px; margin-right: 370px;" class="input-group">
        <span class="input-group-addon">任务名称</span>
        <input id="task_name" class="form-control">
    </div>
    <div style="margin-bottom: 5px; margin-right: 370px;" class="input-group">
        <span class="input-group-addon">任务描述</span>
        <textarea id="task_description" class="form-control" rows="2" name=textarea></textarea>
    </div>
    <div style="margin-bottom: 5px; margin-right: 370px;" class="input-group">
        <span class="input-group-addon">任务用例</span>
        <ul id="treeDemo" class="ztree"></ul>
    </div>
    <div style="margin-top: 5px;">
        <button style="button" class="btn btn-primary" onclick="saveFun()">保存任务</button>
    </div>
</div>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<link href="http://cdn.bootcss.com/zTree.v3/3.5.23/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/zTree.v3/3.5.23/js/jquery.ztree.all.js"></script>
<script type="text/javascript">

    // caseTreeInit()

    var setting = {
    //显示复选框
    check: {
        enable: true,
        chkStyle:"checkbox"
    },};
    $(document).ready(function(){
        let local_url = document.location
        let task_id = local_url.pathname.split("/")[3]
        // 调用用例树接口获取用例列表数据并默认展开
        $.post("/task_manage/task_get_case_tree/",{
            task_id:task_id
        }, function(resp){
            document.querySelector("#task_name").value = resp.data.name;
            document.querySelector('#task_description').value = resp.data.description;
            var zNodes = resp.data.cases;
            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            zTreeObj.expandAll(true) // 默认展开

        })
    });


    function saveFun(){
        // 保存任务
        // window.alert("click save ")
        // 监控 选项勾选
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo")
        var nodes = treeObj.getCheckedNodes(true)

        console.log(nodes)

        // 定义用例列表
        var caseList = new Array();
        for(let i=0;i<nodes.length;i++){
            console.log("选中的节点名称" + nodes[i].name)
            if(nodes[i].isParent == false){
                console.log("勾选的用例名称和ID" + nodes[i].name + "--->" + nodes[i].id )
                caseList.push(nodes[i].id) // 获取选中节点的值并添加到 list 中
            }
        }
        console.log("caseList:"+caseList)

        // 获取任务名称
        let task_name = $("#task_name").val()
        // 获取任务描述
        let task_description = $('#task_description').val()
        // 将 caseList 转为 string
        task_case_str = JSON.stringify(caseList)
        // 获取任务 id
        let local_url = document.location
        let task_id = local_url.pathname.split("/")[3]
        if (task_name ===""){
            window.alert("任务名称不能为空！！")
        }

        // 调用保存接口保存任务
        $.post('/task_manage/task_save/',
            {
                task_id:task_id,
                task_name:task_name,
                task_description:task_description,
                task_case_str:task_case_str
            },
            function(resp){
                window.alert(resp.msg)
            }
        )

 }

</script>

{% endblock %}